<template>
  <div class="banner-item">
    <h1 class="d-title grey mg-b-60">{{ componentData[`title${capitalizeLang}`] }}</h1>
    <!-- <h1 class="d-title mg-b-60">{{ componentData.titleZh }}</h1> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.banner-item {
  position: relative;
  height: 180px;
  background-color: #fff;

  .d-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    color: #333;
    text-align: center;
  }

  .grey {
    color: #666;
    text-align: center;
    padding: 48px 0 0 0;
  }
}
</style>
